<html>
<head>
<title>RChart, User Guide</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" leftmargin="35">
<h3>RCHART, User Guide</h3>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><i>Copyright 2005, J4L 
  Components (http://www.java4less.com)</i></font> </p>
<p><a href="tutorialcontents.html">Go bak to contents</a></p>
<hr>
<h3><font face="Arial, Helvetica, sans-serif">Radarchart configuration</font></h3>
<p>This is a complete example of a radar chart:</p>
<table width="100%" border="0">
  <tr> 
    <td width="0%">&nbsp;</td>
    <td width="36%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="20%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="44%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="0%">&nbsp;</td>
    <td width="36%" valign="top">WIDTH=390<br>
      HEIGHT=300 <br>
      TITLECHART=Costs analysis <br>
      SERIE_1=Product A <br>
      SERIE_2=Product B <br>
      SERIE_TYPE_1=RADAR <br>
      SERIE_TYPE_2=RADAR SERIE_FONT_1=Arial|PLAIN|8 SERIE_FONT_2=Arial|PLAIN|8 
      SERIE_DATA_1=12|73|50|95 SERIE_DATA_2=20|41|60|10 SERIE_STYLE_1=0.2|BLUE|LINE 
      SERIE_STYLE_2=0.2|GREEN|LINE SERIE_FILL_1=BLUE <br>
      SERIE_POINT_1=true <br>
      SERIE_POINT_2=true SERIE_POINT_COLOR_1=BLUE SERIE_POINT_COLOR_2=GREEN RADARCHART_BACK=WHITE 
      RADARCHART_BORDER=0.2|BLACK|LINE RADARCHART_FACTOR_COLOR=BLACK RADARCHART_FACTOR_FONT=Arial|PLAIN|12 
      RADARCHART_FACTOR_MAX=100|100|100|100 RADARCHART_FACTOR_MIN=0|0|0|0 RADARCHART_FACTOR_NAMES=R 
      & D|Distribution|Marketing|other RADARCHART_GRID=0.2|GRAY|DASHED RADARCHART_GRID_FONT=Arial|PLAIN|8 
      RADARCHART_GRID_FONT_COLOR=GRAY RADARCHART_RADIUS=0.8 CHART_BORDER=0.2|0x0|NORMAL 
      CHART_FILL=0xccffcc</td>
    <td width="20%" valign="top"> 
      <p><i><font color="#3333FF">Size<br>
        Size<br>
        Title </font></i><i><font color="#3333FF"><br>
        Name of series<br>
        Name of series <br>
        Radarchart type<br>
        Radarchart type<br>
        Fonts <br>
        Fonts<br>
        Values to plot (series 1).</font></i><i><font color="#3333FF"> <br>
        Values to plot (series 2). <br>
        Style of lines<br>
        Style of lines <br>
        Serie 1 should be filled (blue area)<br>
        Draw points<br>
        Draw points<br>
        Color of points<br>
        Color of points<br>
        Background of chart area<br>
        Border of radarchart<br>
        Color of fonts<br>
        Font<br>
        Max. values of the axis (factors)<br>
        Min. values of the axis (factors) <br>
        Names of the axis (factors)<br>
        <br>
        Style of grid.<br>
        Font of gid labels<br>
        Color of grid labels<br>
        Size of radarchart (default is 0.9)<br>
        Chart's border<br>
        Chart's background </font></i></p>
      </td>
    <td width="44%" valign="top"> 
      <div align="left"> 
        <p>radarPlotter=new RadarPlotter();</p>
        <p>&nbsp;</p>
        <p>serie1=new LineDataSerie(values,lstyle);<br>
          serie2=new LineDataSerie(values,lstyle); </p>
        <p>serie1.valueFont=new Font(...);</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>serie1.fillStyle=FillStyle( GraphicsProvider.getColor(ChartColor.BLUE));<br>
          serie1.drawPoint=true;<br>
          <br>
          serie1.pointColor= GraphicsProvider.getColor(ChartColor.BLUE);<br>
          <br>
          radarPlotter.backStyle=new FillStyle(...);<br>
          radarPlotter.border=new LineStyle(...);<br>
          radarPlotter.factorColor = GraphicsProvider.getColor(ChartColor.BLACK);<br>
          radarPlotter.factorFont=GraphicsProvider.getFont(...);<br>
          radarPlotter.factorMaxs={100,100,100,100};<br>
          radarPlotter.factorMins={0,0,0,0};<br>
          radarPlotter.factorNames={&quot;R &amp; D&quot;, ....};<br>
          <br>
          radarPlotter.gridStyle=new LineStyle(...);<br>
          radarPlotter.gridFont= GraphicsProvider.getFont(...);<br>
          radarPlotter.gridFontColor= GraphicsProvider.getColor(ChartColor.GRAY);<br>
          radarPlotter.radiusModifier=0.8; </p>
        </div>
    </td>
  </tr>
</table>
<h3>&nbsp;</h3>
<h3><img src="images/radarchart.png" width="385" height="290"></h3>
<p>It is also possible to have more than 4 factors (axis). In the following example 
  we have a new axis called &quot;NEW&quot; whose scale is different from the 
  others, 0 to 200.</p>
<table width="100%" border="0">
  <tr> 
    <td width="2%">&nbsp;</td>
    <td width="29%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="69%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="69%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="2%">&nbsp;</td>
    <td width="29%" valign="top">SERIE_DATA_1=12|73|50|95|<b>120 </b>SERIE_DATA_2=20|41|60|10|<b>20 
      </b> RADARCHART_FACTOR_MAX=100|100|100|100|<b>200</b> RADARCHART_FACTOR_MIN=0|0|0|0|<b>0</b> 
      RADARCHART_FACTOR_NAMES=R & D|Distribution|Marketing|other|<b>NEW</b> </td>
    <td width="69%" valign="top"> 
      <p><i><font color="#3333FF"> Values to plot (series 1).</font></i><i><font color="#3333FF"> 
        <br>
        Values to plot (series 2). <br>
        Max. values of the axis (factors)<br>
        Min. values of the axis (factors) <br>
        Names of factors<br>
        </font></i></p>
    </td>
    <td width="69%" valign="top"> 
      <div align="left"> 
        <p>See above</p>
      </div>
    </td>
  </tr>
</table>
<h3><img src="images/radarchart2.png" width="382" height="257"></h3>
<h3>&nbsp;</h3>
<p>It is also possible to have a circular radar chart using the following parameters:</p>
<table width="100%" border="0">
  <tr> 
    <td width="2%">&nbsp;</td>
    <td width="29%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="69%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="69%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="2%" height="82">&nbsp;</td>
    <td width="29%" valign="top" height="82"> 
      <p>RADARCHART_CIRCLE=TRUE <br>
        RADARCHART_TICKS=4 RADARCHART_FACTOR_COLOR=0xff0000 RADARCHART_FACTOR_FONT=Dialog|ITALIC|12 
      </p>
      </td>
    <td width="69%" valign="top" height="82"> 
      <p><i><font color="#3333FF"> Circular chart<br>
        Number of lines in grid</font></i><i><font color="#3333FF"> (defualt is 
        5)<br>
        Color of factors' names is RED<br>
        Font os factors' names </font></i></p>
    </td>
    <td width="69%" valign="top" height="82"> 
      <div align="left"> 
        <p>radarPlotter.drawCircle=true;<br>
          radarPlotter.ticks=4; </p>
      </div>
    </td>
  </tr>
</table>
<p><img src="images/radarchart3.png" width="382" height="297"></p>
<p>&nbsp;</p>
<p>You can use different colors for each factor name using the following parameter:</p>
<table width="100%" border="0">
  <tr> 
    <td width="0%">&nbsp;</td>
    <td width="55%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="23%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="22%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="0%" height="25">&nbsp;</td>
    <td width="55%" valign="top" height="25"> 
      <p>RADARCHART_FACTOR_COLORS=RED|BLUE|GREEN|GRAY|BLACK </p>
    </td>
    <td width="23%" valign="top" height="25"> 
      <p><i><font color="#3333FF"> List of colors</font></i><i><font color="#3333FF"></font></i></p>
    </td>
    <td width="22%" valign="top" height="25"> 
      <div align="left"> 
        <p>radarPlotter.factorColors</p>
      </div>
    </td>
  </tr>
</table>
<p><img src="images/radarchart4.png" width="297" height="254"></p>
<p>&nbsp;</p>
<p>The following 2 parameters allows you to change the color of the points, depending 
  on the value:</p>
<p>&nbsp;</p>
<ul>
  <li>RADARCHART_POINT_COLORS: color of the points</li>
  <li> RADARCHART_POINT_COLORS_SCALE: ascending list of values used to select 
    the color of the point.</li>
</ul>
<p>Example: </p>
<table width="100%" border="0">
  <tr> 
    <td width="0%">&nbsp;</td>
    <td width="55%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="23%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="22%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="0%" height="51">&nbsp;</td>
    <td width="55%" valign="top" height="51"> 
      <p>RADARCHART_POINT_COLORS_SCALE=20|40|60|80 RADARCHART_POINT_COLORS=0xffff00|0xffc800|0xff0000|0xcc3333|0x0 
      </p>
    </td>
    <td width="23%" valign="top" height="51"> 
      <p><i><font color="#3333FF"> Scale<br>
        Colors </font></i><i><font color="#3333FF"></font></i></p>
    </td>
    <td width="22%" valign="top" height="51"> 
      <div align="left"> 
        <p>radarPlotter.pointColorsScale<br>
          radarPlotter.pointColors</p>
      </div>
    </td>
  </tr>
</table>
<p>values under 20 will have a yellow point, values between 20 and 40 will have 
  an orange color, values beetwen 40 and 60 will have a red color, values beetwen 
  60 and 80 will have a dark red color and values above 80 will have a black point.</p>
<p>&nbsp;</p>
<p><img src="images/radarchart5.png" width="302" height="279"></p>
<p>&nbsp;</p>
<hr>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>
